<template>
    <div id="container" class="text-white text-sm bg-primary-300 min-h-screen pb-4">
        <Header />
        <div id="main" class="bg-primary-300 p-6 text-black">
            <div class="rounded bg-white mx-4 my-4 py-6 ">
                <div class="px-6">
                    <h1 class="text-lg font-semibold">个人中心</h1>
                </div>
            </div>
            <div class="rounded bg-white mx-4 mt-4 py-6 ">
                <PersonalNav />
                <div class="mt-4 mb-3 ">
                    <div class="not-prose relative">
                        <div class="ml-4 text-lg">
                            <div class="py-2 text-md">
                                <el-form ref="formRef" :model="form" :rules="rules" label-width="80px"
                                    class="w-[300px]">
                                    <el-form-item label="原始密码" prop="current_password">
                                        <el-input v-model="form.current_password" type="password" placeholder="请输入原始密码"
                                            show-password />
                                    </el-form-item>
                                    <el-form-item label="新密码" prop="new_password">
                                        <el-input v-model="form.new_password" type="password" placeholder="请输入新密码"
                                            show-password />
                                    </el-form-item>
                                    <el-form-item label="确认密码" prop="re_password">
                                        <el-input v-model="form.re_password" type="password" placeholder="请再次输入新密码"
                                            show-password />
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="primary" @click="submitForm">提交</el-button>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <Footer />
    </div>
</template>
<script setup>
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
import { ref,reactive } from 'vue'
defineOptions({
    name: 'ChangePassword',
})
const formRef = ref(null)
const form = reactive({
    current_password: '',
    new_password: '',
    re_password: ''
})

// 验证新密码和确认密码是否一致
const validatePass = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请再次输入新密码'))
    } else if (value !== form.new_password) {
        callback(new Error('两次输入密码不一致!'))
    } else {
        callback()
    }
}

const rules = reactive({
    current_password: [
        { required: true, message: '请输入原始密码', trigger: 'blur' }
    ],
    new_password: [
        { required: true, message: '请输入新密码', trigger: 'blur' },
        { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
    ],
    re_password: [
        { required: true, validator: validatePass, trigger: 'blur' }
    ]
})

const submitForm = async () => {
    if (!formRef.value) return
    await formRef.value.validate(async (valid) => {
        if (valid) {
            await setPassword()
        } else {
            console.log('验证失败')
            return false
        }
    })
}

const setPassword = async () => {
    // 这里可以添加实际的密码修改逻辑
    console.log('提交密码修改', form)
}
</script>
